<div id="sqlExecutor" class="sql-executor-container">
    <el-container>
        <el-main>
            <el-card shadow="hover">
                <div slot="header" class="card-header">
                    <span><i class="el-icon-warning-outline"></i> 自定义 SQL 执行工具</span>
                    <el-tag type="danger" effect="dark">高风险操作，谨慎使用</el-tag>
                </div>

                <el-form :model="form" label-width="100px" label-position="left" class="sql-form">
                    <el-form-item label="操作类型">
                        <el-radio-group v-model="form.type">
                            <el-radio :label="1">查询（SELECT）</el-radio>
                            <el-radio :label="2">执行（INSERT/UPDATE/DELETE）</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="执行密码">
                        <el-input
                            v-model="form.password"
                            type="password"
                            placeholder="请输入执行密码"
                            show-password
                            clearable
                            style="max-width: 320px;"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="SQL 语句" required>
                        <el-input
                            v-model="form.sql"
                            type="textarea"
                            :rows="10"
                            placeholder="请输入需要执行的 SQL 语句"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="handleExecute">执行 SQL</el-button>
                        <el-button @click="handleReset">清空</el-button>
                    </el-form-item>
                </el-form>

                <el-divider></el-divider>

                <div class="result-section">
                    <div class="result-header">
                        <h3><i class="el-icon-document"></i> 执行结果</h3>
                        <el-tag :type="resultTag.type" v-if="resultTag.message" effect="plain">@{{ resultTag.message }}</el-tag>
                    </div>

                    <el-skeleton v-if="loading" animated :rows="5"></el-skeleton>

                    <el-empty description="暂无结果" v-else-if="output === ''"></el-empty>

                    <pre v-else class="result-output">@{{ output }}</pre>
                </div>

                <el-alert
                    title="使用说明"
                    type="warning"
                    :closable="false"
                    class="mt-3"
                >
                    <ul>
                        <li>仅限在确认安全、合法的前提下执行 SQL。</li>
                        <li>执行前请务必备份数据库，避免不可挽回的数据损失。</li>
                        <li>建议先在测试环境验证 SQL 的正确性，再在正式环境执行。</li>
                    </ul>
                </el-alert>
            </el-card>
        </el-main>
    </el-container>
</div>

<script>
new Vue({
    el: '#sqlExecutor',
    data() {
        return {
            form: {
                type: 1,
                password: '',
                sql: ''
            },
            loading: false,
            output: '',
            resultTag: {
                type: 'info',
                message: ''
            }
        };
    },
    methods: {
        async handleExecute() {
            if (!this.form.sql || !this.form.sql.trim()) {
                this.$message.error('请输入 SQL 语句');
                return;
            }

            if (!this.form.password) {
                this.$message.warning('请输入执行密码');
                return;
            }

            this.loading = true;
            this.output = '';
            this.resultTag = { type: 'info', message: '执行中...' };

            try {
                const payload = {
                    type: this.form.type,
                    sql: this.form.sql,
                    password: this.form.password
                };

                const response = await window.api.post('/admin/store/execute', payload);
                console.log(response)
                if (response && response.status === 'success') {
                    const data = response.data;
                    this.output = this.formatOutput(data);
                    this.resultTag = { type: 'success', message: '执行成功' };
                    this.$message.success('执行成功');
                } else {
                    const message = response?.message || '执行失败';
                    this.output = this.formatOutput(response.data);
                    this.resultTag = { type: 'error', message };
                    this.$message.error(message);
                }
            } catch (error) {
                const message = error.response?.data?.message || error.message || '执行失败';
                this.output = this.formatOutput(error.response?.data || error);
                this.resultTag = { type: 'error', message };
                this.$message.error(message);
            } finally {
                this.loading = false;
            }
        },
        handleReset() {
            this.form = {
                type: 1,
                password: '',
                sql: ''
            };
            this.output = '';
            this.resultTag = { type: 'info', message: '' };
        },
        formatOutput(data) {
            if (data === null || data === undefined) {
                return '';
            }

            if (typeof data === 'string') {
                return data;
            }

            try {
                return JSON.stringify(data, null, 2);
            } catch (e) {
                return String(data);
            }
        }
    }
});
</script>

<style>
.sql-executor-container {
    padding: 20px;
}

.sql-form {
    max-width: 960px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-section {
    margin-top: 20px;
}

.result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.result-output {
    background: #1e1e1e;
    color: #dcdcdc;
    padding: 16px;
    border-radius: 6px;
    max-height: 500px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.6;
}

.mt-3 {
    margin-top: 16px;
}

.sql-executor-container .el-alert ul {
    margin: 0;
    padding-left: 18px;
}

.sql-executor-container .el-alert li {
    line-height: 1.6;
}
</style>
